<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>大事件-后台首页</title>
    <link rel="stylesheet" href="js/bootstrap/css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/iconfont.css" />
    <link rel="stylesheet" href="css/main.css" />
    <script src="js/jquery-1.12.4.min.js"></script>
    <!-- bootstrap的js -->
    <script src="./js/bootstrap/js/bootstrap.min.js"></script>
  </head>

  <body>
    <div class="sider">
      <a href="#" class="logo"><img src="images/logo02.png" alt="logo"/></a>
      <div class="user_info">
        <img src="images/2.jpg" alt="person" />
        <span>欢迎&nbsp;&nbsp;<i>李思思</i></span>
        <b>管理员</b>
      </div>
      <div class="menu">
        <div class="level01 active">
          <a href="main_count.html" target="main_frame"
            ><i class="iconfont icon-yidiandiantubiao04"></i
            ><span>首页</span></a
          >
        </div>
        <div class="level01">
          <a href="#"
            ><i class="iconfont icon-icon-article"></i><span>文章管理</span
            ><b class="iconfont icon-arrowdownl"></b
          ></a>
        </div>
        <ul class="level02">
          <li>
            <a href="article_list.html" target="main_frame"
              ><i class="iconfont icon-previewright"></i
              ><span>文章列表</span></a
            >
          </li>
          <li>
            <a href="article_release.html" target="main_frame"
              ><i class="iconfont icon-previewright"></i
              ><span>发表文章</span></a
            >
          </li>
          <li>
            <a href="article_category.html" target="main_frame"
              ><i class="iconfont icon-previewright"></i
              ><span>文章类别管理</span></a
            >
          </li>
        </ul>

        <div class="level01">
          <a href="comment_list.html" target="main_frame"
            ><i class="iconfont icon-comment"></i><span>评论管理</span></a
          >
        </div>
        <div class="level01">
          <a href="user.html" target="main_frame"
            ><i class="iconfont icon-user"></i><span>个人中心</span></a
          >
        </div>
      </div>
    </div>

    <div class="header_bar">
      <form class="search_form">
        <input type="text" placeholder="请输入搜索内容" />
        <i class="iconfont icon-search"></i>
      </form>
      <div class="user_center_link">
        <a href="user.html" onclick="setMenu(3,0)" target="main_frame"
          >个人中心</a
        >
        <img src="images/2.jpg" alt="person" />
        <a href="#"><i class="iconfont icon-tuichu"></i> 退出</a>
      </div>
    </div>

    <div class="main" id="main_body">
      <iframe
        src="main_count.html"
        frameborder="0"
        id="main_frame"
        name="main_frame"
        frameborder="0"
        scrolling="auto"
      ></iframe>
    </div>
    <!-- 模态框 -->
    <!-- Modal -->
    <div
      class="modal fade"
      id="myModal"
      tabindex="-1"
      role="dialog"
      aria-labelledby="myModalLabel"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">提示框！！</h4>
          </div>
          <div class="modal-body">
            你真的要离开吗？
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              好心留下
            </button>
            <button type="button" class="btn btn-primary btn-leave">
              残忍离开
            </button>
          </div>
        </div>
      </div>
    </div>
    <script>
      var $level01 = $('.level01')
      var $subli = $('.level02 li')
      $level01.click(function() {
        $level01.not($(this)).removeClass('active')
        $(this).addClass('active')

        if (
          $(this)
            .next()
            .hasClass('level02')
        ) {
          $(this)
            .next()
            .slideToggle()
          $(this)
            .find('b')
            .toggleClass('rotate0')
        } else {
          $subli.removeClass('active')
        }
      })

      $subli.click(function() {
        $subli.not($(this)).removeClass('active')
        $(this).addClass('active')

        if (
          !$(this)
            .parent()
            .prev()
            .hasClass('active')
        ) {
          $level01.removeClass('active')
          $(this)
            .parent()
            .prev()
            .addClass('active')
        }
      })

      function resizeFrame() {
        var frame_w = $('#main_body').outerWidth()
        var frame_h = $('#main_body').outerHeight()
        $('#main_frame').css({ width: frame_w, height: frame_h })
      }

      resizeFrame()

      $(window).resize(function() {
        resizeFrame()
      })

      function setMenu(m, n) {
        $level01
          .eq(m)
          .addClass('active')
          .siblings()
          .not('.level02')
          .removeClass('active')
        if (m != 1) {
          $('.level02').slideUp()
        } else {
          $('.level02').slideDown()
          $('.level02')
            .children()
            .eq(n)
            .addClass('active')
            .siblings()
            .removeClass('active')
        }
      }
    </script>



    <!-- 自己的逻辑 -->
    <script>
      /*
        用户登出
            1. 退出按钮绑定点击事件
            2. 弹出bootstrap的模态框 提示是否确认
                1. 取消 关闭
                2. 确认
                    1. ajax调用接口
                    2. 数据回来之后 返回登录页即可

      获取用户信息
        请求地址：https://autumnfish.cn/big/admin/getuser
        请求方式：get
        请求参数：
        步骤
        1. 进入到首页之后
        2. 通过用户信息接口获取用户的数据
        3. 渲染到页面上

    */
      $(function() {
        // 退出按钮的 点击事件 弹框提示
        $('.icon-tuichu')
          .parent()
          .click(function() {
            // 弹框
            $('#myModal').modal()
          })

        // 点击确认
        $('.btn-leave').click(function() {
          $.ajax({
            url: 'https://autumnfish.cn/big/admin/logout',
            type: 'post',
            success: function(backData) {
              //   console.log(backData)
              if (backData.code == 200) {
                window.location.href = './login.html'
              }
            }
          })
        })

        // 获取用户信息即可
        $.ajax({
          url: 'https://autumnfish.cn/big/admin/getuser',
          type: 'get',
          success: function(backData) {
            // console.log(backData);
            // 左侧
            $('.user_info img').attr('src', backData.data.user_pic)
            $('.user_info i').html(backData.data.nickname)
            // 右侧
            $('.user_center_link img').attr('src', backData.data.user_pic)
          }
        })
      })
    </script>
  </body>
</html>
